import React, { Component } from 'react'
import {connect} from 'react-redux'
import {AnimalInterface} from '../../types/home.d'

let sex = ['未知','女孩','男孩'];

let speed = ['狗狗','猫猫','其他'];

//pet_breed 1.狗  2.猫  3.其他
//pet_gender  0未知 1 女孩 2 男孩 

interface Iprops{
    location:any,
    history:any,
    addAnimal:(newAnimal:AnimalInterface) => void
}

interface Istate{
    pet_name:string,
    pet_age:string,
    pet_breed:number,
    spe_name:string,
    pet_gender:number
    [propName:string]:any
}

class Public extends Component<Iprops,Istate>{
    state = {
        pet_name:'',
        pet_age:'',
        pet_breed:1,  //小狗
        spe_name:'选择品种',
        pet_gender:0
    }

    componentDidMount(){
        if(this.props.location.state){
            this.setState({
                spe_name:this.props.location.state.spe_name
            })
        }
    }
    render() {
        let {pet_name,pet_age,pet_breed,spe_name,pet_gender} = this.state;
        return (
            <div>
                <div>
                    <div>
                        名字：<input name="pet_name" type="text" value={pet_name} onChange={this.change}/>
                    </div>
                    <div>
                        类别：
                        {speed.map((item,index) => <span  className={index+1 === pet_breed?'active':''} key={index} onClick={() => {
                            this.setState({
                                pet_breed:index+1,
                                spe_name:'选择品种'
                            })
                        }}>{item}</span>)}
                    </div>
                    <div>
                        品种：<span onClick={() => {
                            this.props.history.push(`/choose/${pet_breed}`)
                        }}>{spe_name}</span>
                    </div>
                    <div>   
                        年龄:<input name="pet_age" type="text" value={pet_age} onChange={this.change}/>
                    </div>
                    <div>
                        性别：
                        {sex.map((item,index) => <span className={index === pet_gender?'active':''} onClick={() => {
                            this.setState({
                                pet_gender:index
                            })
                        }} key={index}>{item}</span>)}
                    </div>
                </div>
                <button onClick={this.public}>发布</button>
            </div>
        )
    }

    change = (e:any) => {

        console.log(e.target.name)

        // this.setState({
        //     pet_name:e.target.value
        // })

        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //发布方法

    public = () => {
        let {pet_name,pet_age,pet_breed,pet_gender,spe_name} = this.state;
        let newAnimal:AnimalInterface = {
            id: new Date().getTime(),
            pet_name,
            pet_age,
            pet_breed,
            pet_gender,
            pet_species:spe_name,
            "province": "\u5317\u4eac",
            "city": "\u5317\u4eac\u5e02",
            "county": "\u671d\u9633\u533a",
            "reason": "\u4e8c\u59b9\u662f\u5c0f\u9662\u7684\u72d7\u72d7\u3002\u6bcf\u4e2a\u5c0f\u9662\u7684\u72d7\u90fd\u6e34\u671b\u4e00\u4e2a\u5bb6\uff0c\u4e00\u4e2a\u7231\u5979\u7684\u4e3b\u4eba\u3002\u5b83\u4eec\u4f1a\u5f88\u73cd\u60dc\u4e00\u4e2a\u5bb6\u7684\u673a\u4f1a\u3002\u6709\u610f\u8005\u53ef\u5148\u586b\u4e0a\u7533\u8bf7",
            "image": "http:\/\/img1.goumin.com\/diary\/adopt\/201811\/13\/201811131809415575_720.jpg",
            "is_video": 0,
            "pet_immunity": 1,
            "pet_expelling": 1,
            "pet_sterilization": 1,
            "pet_status": 2,
            "status": 0
          }
        this.props.addAnimal(newAnimal);
        this.props.history.push('/home')
    }
}

let stateMapToProps = () => {
    return {}
}


let dispatchMapToProps = (dispatch:any) => {
    return {
        addAnimal(newAnimal:AnimalInterface){
            dispatch({type:'ADD_ANMIAL',newAnimal})
        }
    }
}



export default connect(stateMapToProps,dispatchMapToProps)(Public)
